<template>
	<div class="message-tips">
		<el-dialog :visible.sync="messageInfo.isShow" width="40%" :before-close="close">
			<p slot="title" class="dialog-head">
				<i class="el-icon-warning-outline icon"></i>
				<span>{{ messageInfo.title }}</span>
			</p>
			<span>{{ messageInfo.content }}</span>
			<span slot="footer" class="dialog-footer">
				<el-button @click="cancel" class="cancel-btn">取 消</el-button>
				<el-button type="primary" class="ok-btn" @click="ok">确 定</el-button>
			</span>
		</el-dialog>
	</div>
</template>

<script>
export default {
	props: {
		messageInfo: {
			type: Object,
			required: true,
			default: () => {}
		}
	},
	methods: {
		ok() {
			this.$emit('ok');
		},
		cancel() {
			this.$emit('cancel');
		},
		close() {
			this.$emit('close');
		}
	}
};
</script>
<style lang="less">
.message-tips {
	.el-dialog__body {
		padding: 20px;
	}
}
</style>
<style lang="less" scoped>
.message-tips {
	.dialog-head {
		span {
			font-weight: 700;
			color: #333;
			line-height: 18px;
			font-size: 15px;
		}
		.icon {
			font-size: 18px;
			color: #ffa033;
		}
	}
	.el-button {
		width: 56px;
		height: 32px;
		padding: 0;
	}
	.cancel-btn {
		color: #999;
	}
	.ok-btn {
		background-color: #6384fe;
	}
}
</style>
